<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>井字棋</title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<div id="app">
			<div class="items">
				<div class="line">
					<div class="line-item" @click="clickItem(item)" v-for="item in items[0]">{{item.text}}</div>
				</div>
				<div class="line">
					<div class="line-item" @click="clickItem(item)" v-for="item in items[1]">{{item.text}}</div>
				</div>
				<div class="line">
					<div class="line-item" @click="clickItem(item)" v-for="item in items[2]">{{item.text}}</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var vue = new Vue({
			el: "#app",
			data: {
				items: [
					[{
						id: 1,
						text: ""
					}, {
						id: 2,
						text: ""
					}, {
						id: 3,
						text: ""
					}],
					[{
						id: 4,
						text: ""
					}, {
						id: 5,
						text: ""
					}, {
						id: 6,
						text: ""
					}],
					[{
						id: 7,
						text: ""
					}, {
						id: 8,
						text: ""
					}, {
						id: 9,
						text: ""
					}]
				],
				//保存能够完成斜向胜利的格子在items中的位置
				obl_loc: [
					[0, 0],
					[0, 2],
					[1, 1],
					[2, 0],
					[2, 2]
				],
				players: [{
					id: 1,
					name: "user1"
				}, {
					id: 2,
					name: "user2"
				}],
				nowPlayer: 0,
				loginPlayerId: 1
			},
			methods: {
				//点击item时触发的方法
				clickItem(item) {
					//item已有字时视为点击无效
					if (item.text != "") return
					var loc = this.findItem(item)
					//将点击的格子的字设置为点击的用户名称
					this.items[loc[0]][loc[1]].text = this.players[this.nowPlayer].name
					
					//判断这次点击后是否胜利
					var isWin = this.hasWinner(item, loc, this.players[this.nowPlayer])
					if (isWin) {
						setTimeout(() => {
							alert(this.players[this.nowPlayer].name + "赢了！")
							location.reload();
						}, 1)
					} else {
						this.changePlayer()
					}
				},
				//通过item的id查找它在items中的位置
				findItem(item) {
					var i = 0
					var j = 0
					for (i in this.items) {
						for (j in this.items) {
							if (this.items[i][j].id == item.id) {
								return [i, j]
							}
						}
					}
				},
				//使两个player交替下棋
				changePlayer() {			
					if (this.nowPlayer == 0) this.nowPlayer = 1
					else this.nowPlayer = 0
				},
				hasWinner(item, loc, player) {
					//判断横向是否已经满足胜利条件
					var row = this.items[loc[0]]
					var rowWin = true
					for (var i in row) {
						//跳过当前的格子
						if (i == loc[1]) continue
						//如果发现该行有与玩家名不一致的格子，则直接break
						if (row[i].text != player.name) {
							rowWin = false
							break
						}
					}
					if (rowWin) return rowWin

					//判断纵向
					var column = {}
					var columnWin = true
					var x = 0
					while (x < this.items.length) {
						column[x] = this.items[x++][loc[1]]
					}
					for (var i in column) {
						//跳过当前的格子
						if (i == loc[0]) continue
						//如果发现该列有与玩家名不一致的格子，则直接break
						if (column[i].text != player.name) {
							columnWin = false
							break
						}
					}
					if (columnWin) return columnWin

					//判断斜向
					var isObl = false
					var oblData = this.obl_loc
					//判断该格子是否属于可斜向胜利的格子
					//如果不是，则直接返回false
					for (var i in oblData) {
						if (oblData[i][0] == loc[0] && oblData[i][1] == loc[1]) {
							isObl = true
							break
						}
					}
					if (!isObl) return false

					//判断从左至右的斜向
					if (this.items[oblData[0][0]][oblData[0][1]].text == player.name &&
						this.items[oblData[2][0]][oblData[2][1]].text == player.name &&
						this.items[oblData[4][0]][oblData[4][1]].text == player.name
					) {
						return true
					}
					
					//判断从右至左的斜向
					if (this.items[oblData[1][0]][oblData[1][1]].text == player.name &&
						this.items[oblData[2][0]][oblData[2][1]].text == player.name &&
						this.items[oblData[3][0]][oblData[3][1]].text == player.name
					) {
						return true
					}
				}
			}
		})
	</script>
</html>
